﻿@page "/components/breadcrumbs"

<DocsPage>
    <DocsPageHeader Title="Breadcrumbs"
                    SubTitle="A useful way to show the user's location.">
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Breadcrumbs">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="BreadcrumbsBasicExample">
                <BreadcrumbsBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Separator">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="BreadcrumbsSeparatorExample">
                <BreadcrumbsSeparatorExample />
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Render Fragments">
                <Description>It is also possible to provide a <CodeInline>RenderFragment</CodeInline> as a template.</Description>
            </SectionHeader>
            <SectionContent Code="BreadcrumbsSeparatorTemplateExample">
                <BreadcrumbsSeparatorTemplateExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Item Icons">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="BreadcrumbsItemIconsExample">
                <BreadcrumbsItemIconsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Item Template">
                <Description>If you use the <CodeInline>ItemTemplate</CodeInline> parameter, MudBlazor doesn't wrap the content in anchors.</Description>
            </SectionHeader>
            <SectionContent Code="BreadcrumbsItemTemplateExample">
                <BreadcrumbsItemTemplateExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Collapsed">
                <Description>You can set the <CodeInline>MaxItems</CodeInline> parameter in order to automatically collapse the breadcrumbs when it exceeds a number of items.</Description>
            </SectionHeader>
            <SectionContent Code="BreadcrumbsCollapsedExample">
                <BreadcrumbsCollapsedExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>